import React from 'react';
import { ModalForm, ProFormText, ProFormRadio, ProFormTextArea } from '@ant-design/pro-form';
import type { AddConfigItem } from '../data';

type CreateFormProps = {
  createModalVisible: boolean;
  handleModalVisible: any;
  onSubmit: (values: AddConfigItem) => Promise<void>;
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { createModalVisible, handleModalVisible, onSubmit } = props;

  function generateRandomString() {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (let i = 0; i < 30; i++) {
      result += characters.charAt(Math.floor(Math.random() * characters.length));
    }

    return result;
  }

  return (
    <ModalForm
      title="新建配置"
      width="400px"
      visible={createModalVisible}
      onVisibleChange={handleModalVisible}
      onFinish={onSubmit}
      initialValues={{
        category: 2,
        scene: 2,
        style: 1,
        channel: generateRandomString(),
      }}
      modalProps={{ destroyOnClose: true }}
    >
      <ProFormText
        rules={[
          {
            required: true,
            message: '配置描述不能为空',
          },
        ]}
        width="md"
        name="describe"
        label="配置描述"
      />

      <ProFormRadio.Group
        name="category"
        label="联系方式"
        radioType="button"
        options={[
          {
            label: '单人',
            value: 1,
            disabled: true,
          },
          {
            label: '多人',
            value: 2,
          },
        ]}
      />

      <ProFormRadio.Group
        name="scene"
        label="场景"
        radioType="button"
        options={[
          {
            label: '小程序',
            value: 1,
            disabled: true,
          },
          {
            label: '二维码',
            value: 2,
          },
        ]}
      />

      <ProFormRadio.Group
        name="style"
        label="小程序控件样式"
        radioType="button"
        options={[
          {
            label: '样式1',
            value: 1,
          },
          {
            label: '样式2',
            value: 2,
            disabled: true,
          },
        ]}
      />

      <ProFormTextArea
        rules={[
          {
            required: true,
            message: '渠道码不能为空',
          },
        ]}
        disabled={true}
        width="md"
        name="channel"
        label="渠道码"
      />
    </ModalForm>
  );
};

export default CreateForm;
